<template>
    <div class="asset-data">
        <section class="common-bar form-tab-bar clear">
            <template v-if="isShowChart == 1">
                <el-select
                class="select-year"
                v-model="yearVal"
                placeholder="请选择"
                @change="selectYear"
                >
                <el-option
                v-for="item in yearOptions"
                :key="item"
                :label="item"
                :value="item"
                ></el-option>
            </el-select>
            <ul class="data-type-tips">
                <li v-for="(item, index) of typeData" :key="index">
                    <span :class="'color' + index">{{ item }}</span>
                    <el-tooltip
                    v-if="index == 1"
                    class="item"
                    effect="dark"
                    content="资产总额=使用中资本总额+未使用资产总额+损坏资产总额，不计提折旧"
                    placement="top"
                    >
                    <i class="el-icon-info"></i>
                </el-tooltip>
            </li>
        </ul>
    </template>
    <template v-else>
        <el-button class="excel-btn" @click="outPutExcel">
            <i class="excel-icon"></i>
            <i>导出EXCEL</i>
        </el-button>
    </template>
    <div class="tab-tools fr">
        <el-button type="text" @click="handleForm(1)">
            <i :class="isShowChart == 1 ? 'chart0' : 'chart1'"></i>
        </el-button>
        <el-button type="text" @click="handleForm(2)">
            <i :class="isShowChart == 2 ? 'excal1' : 'excal0'"></i>
        </el-button>
    </div>
</section>
<section class="tab-form-part">
    <template v-if="isShowChart == 1">
        <div class="line-chart-box">
            <lineChart
            v-if="lineChartFlag == true"
            ref="assetLineChart"
            id="line-chart"
            style="width: 100%;height:100%;"
            :lineOption.sync="lineChartData"
            ></lineChart>
            <div v-if="yearVal == ''" class="no-data">- 暂无数据 -</div>
        </div>
    </template>
    <template v-else>
        <el-table
        :data="ExcelPageData"
        style="width: 100%"
        v-loading="tableLoading"
        >
        <el-table-column
        fixed
        prop="date"
        sortable
        label="日期"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="6"
        sortable
        label="固定资产总数"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="7"
        sortable
        label="资产总额"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="3"
        sortable
        label="损坏数"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="4"
        sortable
        label="丢失数"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="1"
        sortable
        label="未使用数"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="2"
        sortable
        label="使用中"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="5"
        sortable
        label="报废数"
        align="center"
        show-overflow-tooltip
        ></el-table-column>
    </el-table>
    <div class="table-pageBox">
        <el-pagination
        background
        @current-change="change_page"
        :page-size="page_size"
        :current-page="page_index"
        layout="prev, pager, next"
        :total="total_number"
        ></el-pagination>
    </div>
</template>
</section>
<section class="rank-chart-part">
    <el-date-picker
    v-model="dateVal"
    :picker-options="pickerOptions"
    type="date"
    :clearable="false"
    value-format="yyyy-MM-dd"
    placeholder="选择日期"
    @change="selectDay"
    ></el-date-picker>
    <div class="map-container">
        <div class="map-box">
            <pieChart
            v-if="pieChartFlag == true"
            id="pie-chart"
            style="width: 100%;height:100%;"
            :pieOption.sync="pieChartData"
            ></pieChart>
            <div v-if="dateVal == ''" class="no-data">- 暂无数据 -</div>
        </div>
        <div class="map-box">
            <rankingChart
            v-if="rankChartFlag == true"
            id="ranking-chart"
            style="width: 100%;height:100%;"
            :rankOption.sync="rankChartData"
            ></rankingChart>
            <div v-if="dateVal == ''" class="no-data">- 暂无数据 -</div>
        </div>
    </div>
    <p class="getdata-time" v-if="dateVal != ''">
        该数据取自{{ formatTime1(this.dateVal) }}
    </p>
</section>
</div>
</template>

<script>
    import lineChart from "../charts/asset-line";
    import pieChart from "../charts/asset-pie";
    import rankingChart from "../charts/asset-rank";
    import {
        getPassData,
        changeSimpleDate
    } from "../../../assets/js/charts/chartsTool.js";
// 折线图
const defaultLineChart = {
    dateArr: [], //横坐标日期
    lineSeries: [] //纵坐标值
};
// 饼图
const defaultPieChart = {
    myColor: ["#55D1E2", "#6DC888", "#348EFC", "#F3E08A", "#774CB1"],
    pieData: [
    { value: 0, name: "未使用" },
    { value: 0, name: "使用中" },
    { value: 0, name: "损坏" },
    { value: 0, name: "丢失" },
    { value: 0, name: "报废" }
    ]
};
// 柱状图
const defaultRankChart = {
    myColor: ["#55D1E2", "#6DC888", "#348EFC", "#F3E08A", "#774CB1"],
    titlename: ["未使用", "使用中", "损坏", "丢失", "报废"],
    valdata: [100, 100, 100, 100, 100],
    parcentData: [0, 0, 0, 0, 0]
};
export default {
    components: {
        lineChart,
        pieChart,
        rankingChart
    },
    data() {
        return {
            // 选择年
            yearOptions: [],
            yearVal: "",
            typeData: [
            "固定资产总数",
            "资产总额",
            "损坏数",
            "丢失数",
            "未使用数",
            "使用中",
            "报废数"
            ],
            colorData: [
            "#D401C0",
            "#e91e63",
            "#3B92D7",
            "#C6AF36",
            "#4D97B7",
            "#6DC888",
            "#6928B7"
            ],
            dateVal: "", //筛选的日期
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            isShowChart: 1, //默认显示 chart折线图
            // 分页：
            page_index: 1,
            page_size: 9,
            total_number: 0,
            ExcelData: [], //Excel表格全部数据，365条
            ExcelPageData: [], //Excel表格一页数据
            tableLoading: false,
            lineChartFlag: false,
            lineChartData: Object.assign({}, defaultLineChart),
            pieChartFlag: false,
            pieChartData: Object.assign({}, defaultPieChart),
            rankChartFlag: false,
            rankChartData: Object.assign({}, defaultRankChart)
        };
    },
    created() {},
    watch: {
    },
    mounted() {
        this.getYearData();

        this.$nextTick(() => {
          let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day = date.getDate();

          this.yearVal = year;
          this.getAssetYear();

          this.dateVal = year + "-" + month + "-" + day;
          this.getAssetDay();
      });
    },
    methods: {
        selectYear(val) {
            this.getAssetYear();
        },
        selectDay(val) {
            this.getAssetDay();
        },
        // 切换图表
        handleForm(val) {
            if (this.yearVal == "") {
                this.$message.warning("请先选择年份");
                return;
            }
            this.isShowChart = val;
        },
        /**
         * 获取年份数据
         */
         getYearData() {
            let success = res => {
                let _data=res.data;
                this.yearOptions = _data.reverse();
            };
            this.$ajax.get("api/property/year", {
                params: {},
                func: { success: success }
            });
        },
        /**
         * 获取资产年数据
         */
         getAssetYear() {
            this.lineChartFlag = false;
            this.lineChartData = Object.assign(
                {},
                deep_clone(defaultLineChart)
                );
            let success = res => {
                let data = res.data;
                // 曲线图
                this.lineChartData.dateArr = Object.keys(data); //获取横坐标的年月日的日期字符串
                let valArr = Object.values(data); //一年里每一天包含7种状态的json数据
                this.typeData.forEach((val, key) => {
                    let ydata = [];
                    valArr.map(item => {
                        // 页面设计的资产类型排列顺序（key），和后台返回的值（item的数字类型的键）对应上
                        switch (key) {
                            case 0:
                            ydata.push(item["6"]);
                            break;
                            case 1:
                            ydata.push(item["7"]);
                            break;
                            case 2:
                            ydata.push(item["3"]);
                            break;
                            case 3:
                            ydata.push(item["4"]);
                            break;
                            case 4:
                            ydata.push(item["1"]);
                            break;
                            case 5:
                            ydata.push(item["2"]);
                            break;
                            case 6:
                            ydata.push(item["5"]);
                            break;
                        }
                    });
                    let lineItem = {
                        name: val,
                        type: "line",
                        data: ydata,
                        color: this.colorData[key],
                        symbol: "none",
                        smooth: true
                    };
                    this.lineChartData.lineSeries.push(lineItem);
                });
                this.lineChartFlag = true;
                // this.$nextTick(() => {
                //     console.log(this.$refs.assetLineChart)
                //     // this.$refs.assetLineChart.initChart();
                //     })
                // Excel表
                for (let key in data) {
                    data[key].date = key;
                    this.ExcelData.push(data[key]);
                }
                // 默认显示第一页，即前9条
                this.ExcelPageData = this.ExcelData.slice(0, 9);
                this.total_number = this.ExcelData.length;
            };
            this.$ajax.get("api/property/yearrecord", {
                params: { year: this.yearVal },
                func: { success: success }
            });
        },
        /**
         * 获取资产日数据
         */
         getAssetDay() {
            // console.log(newVal)
            this.pieChartFlag = false;
            this.pieChartData = Object.assign({}, deep_clone(defaultPieChart));
            this.rankChartFlag = false;
            this.rankChartData = Object.assign(
                {},
                deep_clone(defaultRankChart)
                );
            let success = res => {
                // 饼图
                var valArr = Object.values(res.data);
                this.pieChartData.pieData.forEach((item, inx) => {
                    item.value = valArr[inx];
                });
                this.pieChartFlag = true;
                // 柱形图
                // 柱状图只需要展示5个状态的数据
                let Arr5 = valArr.slice(0, 5);
                // 后台返回的值是字符串格式，转成数字类型进行计算
                let statusArr = Arr5.map(Number);
                //总数（5项状态的值的累加）
                let statusTotal = statusArr.reduce(
                    (total, inxVal) => total + inxVal,
                    0
                    );
                // console.log(statusArr.reduce((total, inxVal) => total + inxVal, 0))
                this.rankChartData.parcentData = statusArr;
                this.rankChartData.valdata.forEach((item, inx) => {
                    // 图表样式优化，如果数据总数statusTotal为0的时候，就赋值100，仅为了美观
                    this.rankChartData.valdata[inx] =
                    statusTotal == 0 ? 100 : statusTotal;
                });
                this.rankChartFlag = true;
            };
            this.$ajax.get("api/property/dayrecord", {
                params: { day: this.dateVal },
                func: { success: success }
            });
        },
        // 导出Excel
        outPutExcel() {
            this.exportExcelGet(
                "api/property/yearrecordexcel",
                { year: this.yearVal },
                "",
                "Excel数据"
                );
        },
        // 分页：
        change_page(val) {
            this.page_index = val;
            let currentVal = (val - 1) * this.page_size;
            this.ExcelPageData = this.ExcelData.slice(
                currentVal,
                currentVal + 9
                );
        }
    }
};
</script>
<style lang="scss">
.form-tab-bar {
    .select-year {
        .el-input__inner {
            width: 180px;
            height: 36px;
            line-height: 36px;
        }
    }
    .data-type-tips {
        display: inline-block;
        margin-left: 20px;
        li {
            display: inline-block;
            span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                margin: 0 20px;
                font-size: 12px;
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                }
            }
        }
        .color0 {
            color: #bd14bd;
            border-top: 1px solid #bd14bd;
            &::after {
                background-color: #bd14bd;
            }
        }
        .color1 {
            color: #e91e63;
            border-top: 1px solid #e91e63;
            margin-right: 5px;
            &::after {
                background-color: #e91e63;
            }
        }
        .el-tooltip {
            font-size: 16px;
            margin-right: 10px;
            color: #999;
            cursor: pointer;
        }
        .color2 {
            color: #3b92d7;
            border-top: 1px solid #3b92d7;
            &::after {
                background-color: #3b92d7;
            }
        }
        .color3 {
            color: #c6af36;
            border-top: 1px solid #c6af36;
            &::after {
                background-color: #c6af36;
            }
        }
        .color4 {
            color: #4d97b7;
            border-top: 1px solid #4d97b7;
            &::after {
                background-color: #4d97b7;
            }
        }
        .color5 {
            color: #6dc888;
            border-top: 1px solid #6dc888;
            &::after {
                background-color: #6dc888;
            }
        }
        .color6 {
            color: #6928b7;
            border-top: 1px solid #6928b7;
            &::after {
                background-color: #6928b7;
            }
        }
    }
    .excel-btn {
        display: inline-block;
        width: 130px;
        height: 36px;
        padding: 0;
        font-size: 14px;
        color: #666;
        i {
            vertical-align: middle;
        }
        .excel-icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("../../../assets/images/assetManage/Excel-icon.png")
            no-repeat;
            margin-right: 10px;
        }
    }
    .tab-tools {
        display: inline-block;
        i {
            display: inline-block;
            width: 20px;
            height: 20px;
            color: #ccc;
            margin-left: 10px;
        }
        .chart0 {
            background: url("../../../assets/images/assetManage/chart.png")
            no-repeat;
        }
        .chart1 {
            background: url("../../../assets/images/assetManage/b_chart.png")
            no-repeat;
        }
        .excal0 {
            background: url("../../../assets/images/assetManage/b_excal.png")
            no-repeat;
        }
        .excal1 {
            background: url("../../../assets/images/assetManage/excal.png")
            no-repeat;
        }
    }
}
.tab-form-part {
    height: 440px;
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    position: relative;
    .line-chart-box {
        height: 100%;
    }
    .el-table th {
        padding: 1px 0;
        color: #000;
        background-color: #dae5fc;
    }
    .el-table td {
        padding: 6px 0;
        color: #000;
    }
    .table-pageBox {
        position: absolute;
        bottom: 20px;
        left: 30px;
    }
}
.rank-chart-part {
    padding: 20px 40px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    .el-date-editor.el-input {
        width: 180px;
        .el-input__inner {
            height: 36px;
            line-height: 36px;
        }
    }

    .map-container {
        height: 330px;
        margin-bottom: 20px;
        .map-box {
            display: inline-block;
            width: 50%;
            height: 100%;
            box-sizing: border-box;
            &:nth-child(2) {
                border: 1px solid #ececec;
            }
        }
    }
    .getdata-time {
        text-align: right;
        font-size: 12px;
        color: #999;
    }
}
.no-data {
    height: 100%;
    line-height: 400px;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    background-color: #fff;
}
</style>